<template>
  <div class="activity-enum w-flex-between">
    <div class="enum-box">
      <global-enum-com
        :data-arr="dataArr"
        background-color="#545c64"
        text-color="#fff"
        active-text-color="#ffd04b"
        index-key="_id"
        :add-btn="true"
        keyKey="_id"
        @select="enumClick"
        @open="enumClick">
        <template slot="option" slot-scope="scope">
          <enum-option
            :model="scope.model"
            @enumOptionClick="enumOptionClick"></enum-option>
        </template>
      </global-enum-com>
    </div>
    <div class="content-box">
      <enum-detail ref="EnumDetail"/>
    </div>
  </div>
</template>

<script lang="ts">
  import { Vue, Component, Prop } from 'vue-property-decorator'
  import GlobalEnumCom from '@/components/global/enum/index.vue'
  import { EnumType } from "@/components/global/enum/types";
  import { EnumOptionEmitQurty, EnumOptionType } from '../enumOption/types'
  import EnumDetail from './detail.vue'
  import { EnumDetailType } from './types'
  import EnumOption from '../enumOption/index.vue'

  @Component({
    name: 'ActivityEnumCom',
    components: {
      GlobalEnumCom,
      EnumDetail,
      EnumOption
    }
  })
  export default class ArticleEnum extends Vue{
    @Prop({ default: [] }) dataArr!: Array<EnumType>

    currentEnumId = ''

    enumOptionClick(item: EnumOptionEmitQurty) {
      switch (item.type) {
        case EnumOptionType.DETAIL:
          this.enumClick(item.model._id)
          break
        default:
          this.$emit('enumOptionClick', item)
      }
    }

    enumClick(id: string) {
      if (this.currentEnumId === id) {
        return
      }
      (this.$refs.EnumDetail as EnumDetailType).show(id)
      this.currentEnumId = id;
    }
  }

</script>

<style scoped lang="scss">
.activity-enum {
  padding-top: 20px;
  min-height: calc(100vh - 300px);
  .enum-box {
    width: 300px;
    margin-right: 20px;
  }
  .content-box {
    border: 1px solid #ccc;
    padding: 20px;
    flex: 1 0 auto;
  }
}
</style>
